<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }

</style>

</head>
<body>
    <div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1', '3']" @select="loadTableData">
<!--            <el-submenu index="1">-->
<!--              <template slot="title"><i class="el-icon-message"></i>病房管理</template>-->
              <el-submenu index="1-1">
                <template slot="title">内科</template>
                <el-menu-item index="1" @click="loadTableData(1)">101房间</el-menu-item>
                <el-menu-item index="2">102房间</el-menu-item>
                <el-menu-item index="3">103房间</el-menu-item>
                <el-menu-item index="4">104房间</el-menu-item>
              </el-submenu>
              <el-submenu index="1-2">
                <template slot="title">外科</template>
                <el-menu-item index="5">201房间</el-menu-item>
                <el-menu-item index="6">202房间</el-menu-item>
                <el-menu-item index="7">203房间</el-menu-item>
                <el-menu-item index="8">204房间</el-menu-item>
              </el-submenu>
              <el-submenu index="1-3">
                <template slot="title">儿科</template>
                <el-menu-item index="9">301房间</el-menu-item>
                <el-menu-item index="10">302房间</el-menu-item>
                <el-menu-item index="11">303房间</el-menu-item>
                <el-menu-item index="12">304房间</el-menu-item>
              </el-submenu>
              <el-submenu index="1-4">
                <template slot="title">眼科</template>
                <el-menu-item index="13">401房间</el-menu-item>
                <el-menu-item index="14">402房间</el-menu-item>
                <el-menu-item index="15">403房间</el-menu-item>
                <el-menu-item index="16">404房间</el-menu-item>
              </el-submenu>
              <el-submenu index="1-5">
                <template slot="title">口腔科</template>
                <el-menu-item index="17">501房间</el-menu-item>
                <el-menu-item index="18">502房间</el-menu-item>
                <el-menu-item index="19">503房间</el-menu-item>
                <el-menu-item index="20">504房间</el-menu-item>
              </el-submenu>
<!--            </el-submenu>-->
          </el-menu>
        </el-aside>
        
        <el-container>
          <el-main>
            <el-table :data="tableData">
              <el-table-column prop="id" label="编号" width="140">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="120">
              </el-table-column>
              <el-table-column prop="address" label="地址" width="300">
              </el-table-column>
              <el-table-column prop="phone" label="联系方式">
            </el-table-column>
            <el-table-column label="操作"><template slot-scope="scope">
             <el-button @click="outPatient(scope.row.id)">出院</el-button></template>
            </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-container>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            tableData:[{id:1,name:"王小虎",address:"北京市海淀区西二旗",phone:"18511111111"},
            {id:1,name:"王小虎",address:"北京市海淀区西二旗",phone:"18511111111"},
            {id:1,name:"王小虎",address:"北京市海淀区西二旗",phone:"18511111111"},
            {id:1,name:"王小虎",address:"北京市海淀区西二旗",phone:"18511111111"},
            {id:1,name:"王小虎",address:"北京市海淀区西二旗",phone:"18511111111"},
            ]
        },
        mounted:function(){
            this.loadTableData(1,null)
        },
        methods:{
            loadTableData(index,indexPath){
                axios.get("patient/getPatientBySickroomId",{params:{sickroomId:index}}).then((res)=>{
                    console.log(res.data)
                    this.tableData=res.data.data
                })
            },
            outPatient(patientId){
                axios.get("patient/out",{params:{id:patientId}}).then((res)=>{
                    console.log(res.data)
                })
            }
        }
        // data() {
        // const item = {
        //   id: '1',
        //   name: '王小虎',
        //   address: '上海市普陀区金沙江路 1518 弄',
        //   phone: '18511111111'
        // };
        // return {
        //   tableData: Array(20).fill(item)
        // }
    //   }
    })
</script>
</html>